<template>
    <div class="video-list-wrap" v-loading="pageLoading">
        <el-row type="flex" justify="space-between">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
                <el-form-item>
                    <el-select @change="search" v-model="searchForm.isAssociation" placeholder="请选择关联业主单位状态">
                        <el-option
                            v-for="item in isAssociationOptions"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-show="searchForm.isAssociation == 1">
                    <el-select filterable @change="search" v-model="searchForm.orgIds" placeholder="请选择业主单位">
                        <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
                        <el-option
                            v-for="item in orgList"
                            :key="item.organizationId"
                            :label="item.shortName"
                            :value="item.organizationId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input
                        placeholder="请输入视频名称"
                        v-model="searchForm.name"
                        @keyup.enter.native="search"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-button type="primary" @click="syncVideoList">同步视频列表</el-button>
            </div>
        </el-row>
        <el-table
            v-loading="loading"
            ref="videoTableList"
            :data="tableData"
            style="width: 100%">
            <el-table-column label="编号" prop="id" width="100"></el-table-column>
            <el-table-column label="设备编码" prop="deviceId"></el-table-column>
            <el-table-column label="设备名称" prop="name"></el-table-column>
            <el-table-column label="关联业主单位" prop="organizationId">
                <template slot-scope="scope">
                    <bind-org :row="scope.row" :orgList="orgList"></bind-org>
                </template>
            </el-table-column>
            <el-table-column label="关联建筑物" prop="fbsName">
                <template slot-scope="scope">
                    <p>{{scope.row.relateObjType == 2 ? scope.row.fbsName : ' '}}</p>
                </template>
            </el-table-column>
            <el-table-column label="设备类型" prop="typeName"></el-table-column>
            <el-table-column label="通道号" prop="channel"></el-table-column>
            <el-table-column label="在线状态" prop="isOnline">
                <template slot-scope="scope">
                    <p>{{scope.row.isOnline == 0 ? '离线' : '在线'}}</p>
                </template>
            </el-table-column>
            <el-table-column label="加密状态" prop="isEncrypt">
                <template slot-scope="scope">
                    <p>{{scope.row.isEncrypt == 0 ? '未加密' : '已加密'}}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleDetail(scope.row)" type="text" size="small">视频缩略图</el-button>
                    <span class="dividing-line">|</span>
                    <el-button @click="editDetail(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column type="expand" width='1'>
                <template slot-scope="scope">
                    <img :src="scope.row.picUrl" width="400px" height="200px">
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!-- 编辑 -->
        <el-dialog
            :close-on-click-modal="false"
            title="编辑"
            width="600px"
            top='30vh'
            v-if="dialogEditInfo"
            :visible.sync="dialogEditInfo"
            @close="closeEditInfo"
            v-dialogDrag>
            <video-base-info :orgList="orgList" :videoInfo="editVideoInfo" :closeFun="closeEditInfo"></video-base-info>
        </el-dialog>
    </div>
</template>
<script>
import { getOrgList } from '@/api/org'
import { getListForAccountSet, updateOrgVideo } from '@/api/sysConfig'
import BindOrg from '../Dialog/BindOrg'
import VideoBaseInfo from '../Dialog/VideoBaseInfo'

export default {
    name: 'ViedoList',
    components: {
        BindOrg,
        VideoBaseInfo
    },
    data() {
        return {
            pageLoading: false,
            loading: false,
            dialogEditInfo: false,
            orgList: [],
            isAssociationOptions: [
                {
                    text: '全部关联业主单位状态',
                    value: '-1'
                },
                {
                    text: '未关联业主单位',
                    value: '0'
                },
                {
                    text: '已经关联业主单位',
                    value: '1'
                }
            ],
            // 搜索条件
            searchForm: {
                orgIds: this.$store.state.userinfo.organizationIds,
                isAssociation: '-1',
                name: '',
            },
            // 列表数据
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 当前编辑的视频信息
            editVideoInfo: {}
        }
    },
    created() {
        let that = this
        // 获取业主单位信息
        getOrgList({
            queryType: 0
        }).then(res => {
            if(res.status = 200) {
                // that.searchForm.orgIds = res.data[0].organizationId
                that.orgList = res.data
                // 加载列表
                that.getTableData()
            }
        })
    },
    methods: {
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            let parames = {
                organizationId: that.searchForm.isAssociation == -1 ? '' : that.searchForm.orgIds,
                lianyunType: that.searchForm.isAssociation,
                videoName: that.searchForm.name.trim(),
                equiptType: 0,
                pageSize: that.pageSize,
                pageIndex: that.currentPage - 1
            }
            // 获取列表信息
            getListForAccountSet(parames).then(res => {
                that.tableData = res.data
                that.total = res.total
                that.loading = false
            })
        },
        search() {
            this.getTableData(1)
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        // 详情
        handleDetail(row) {
            let that = this
            
            this.$refs.videoTableList.toggleRowExpansion(row)
        },
        // 编辑
        editDetail(row) {
            let that = this
            if(row) {
                that.editVideoInfo = row
                that.dialogEditInfo = true
            }
        },
        // 关闭编辑弹框
        closeEditInfo(flag) {
            let that = this
            that.dialogEditInfo = false
            if(flag) {
                this.getTableData(this.editVideoInfo.id?'':1)
            }
        },
        // 同步视频列表
        syncVideoList() {
            let that = this
            let parames = {
                organizationId:0,
                type:0
            }
            that.pageLoading = true
            updateOrgVideo(parames).then(res => {
                if(res.status === 200) {
                    that.$message({
                        message: '视频列表同步成功！',
                        type: 'success'
                    })
                    that.search()
                } else {
                    that.$message({
                        message: '视频列表同步失败！',
                        type: 'warning'
                    })
                }
                that.pageLoading = false
            })
        },
        
    }
}
</script>
